<template>
  <div>
    <n-card>
      <n-form-item path="name" label-placement="left">
        <n-button type="info" @click="add" style="margin-right: 10px">新增单人</n-button>
        <n-button type="error" @click="deleall" style="margin-right: 10px">批量删除</n-button>
        <n-button type="warning" @click="editeall">批量修改</n-button>
        <n-button type="info" @click="download" style="margin-left: 10px">下载模板</n-button>
        <div style="margin-left: 10px">
          <n-input
            type="text"
            placeholder="请输入姓名"
            style="width: 200px"
            v-model:value="data.search"
          />
          <n-button type="info" style="margin-left: 10px" @click="search">搜索</n-button>
        </div>
        <n-button type="warning" @click="reset" style="position: absolute; right: 260px"
          >重置</n-button
        >
        <label for="upload" class="top">导入工资单</label>
        <input
          type="file"
          multiple
          id="upload"
          style="display: none"
          @change="changeExcel"
          accept=".xls,.xlsx"
        />
        <n-button type="success" @click="portexcel" style="position: absolute; right: 10px"
          >导出excel</n-button
        >
      </n-form-item>
      <n-data-table
        :data="data.data"
        :columns="columns"
        :pagination="pagination"
        :row-key="rowKey"
        @update:checked-row-keys="handleCheck"
        scroll-x="2300"
      ></n-data-table>

      <!-- 新增弹窗 -->
      <n-modal
        v-model:show="data.add"
        :mask-closable="false"
        preset="dialog"
        title="新增"
        style="position: relative"
      >
        <n-form
          label-placement="left"
          label-width="auto"
          :rules="addrules"
          ref="formRef"
          :model="model"
        >
          <n-form-item label="姓名" path="name">
            <n-input v-model:value="model.name" placeholder="请输入姓名" type="text" />
          </n-form-item>
          <n-form-item label="电话号码" path="tel">
            <n-input v-model:value="model.tel" placeholder="请输入电话号码" type="number" />
          </n-form-item>
          <n-form-item label="基本工资" path="wage">
            <n-input v-model:value="model.wage" placeholder="请输入基本工资" type="number" />
          </n-form-item>
          <n-form-item label="出勤天数" path="days">
            <n-input v-model:value="model.days" placeholder="请输入出勤天数" type="number" />
          </n-form-item>
          <n-form-item label="加班时长" path="hours">
            <n-input v-model:value="model.hours" placeholder="请输入加班时长" type="number" />
          </n-form-item>
          <n-form-item label="加班工资" path="overtime">
            <n-input v-model:value="model.overtime" placeholder="请输入加班工资" type="number" />
          </n-form-item>
          <n-form-item label="岗位津贴" path="jobs">
            <n-input v-model:value="model.jobs" placeholder="请输入岗位津贴" type="number" />
          </n-form-item>
          <n-form-item label="奖金" path="prize">
            <n-input v-model:value="model.prize" placeholder="请输入奖金" type="number" />
          </n-form-item>
          <n-form-item label="交通补贴" path="traffic">
            <n-input v-model:value="model.traffic" placeholder="请输入交通补贴" type="number" />
          </n-form-item>
          <n-form-item label="总计工资" path="collect">
            <n-input v-model:value="model.collect" placeholder="请输入总计工资" type="number" />
          </n-form-item>
          <n-form-item label="五险一金扣除" path="insurances">
            <n-input
              v-model:value="model.insurances"
              placeholder="请输入五险一金扣除"
              type="number"
            />
          </n-form-item>
          <n-form-item label="个体税扣除" path="unit">
            <n-input v-model:value="model.unit" placeholder="请输入个体税扣除" type="number" />
          </n-form-item>
          <n-form-item label="考勤扣除" path="clocking">
            <n-input v-model:value="model.clocking" placeholder="请输入考勤扣除" type="number" />
          </n-form-item>
          <n-form-item label="其他扣款" path="else">
            <n-input v-model:value="model.else" placeholder="请输入其他扣款" type="number" />
          </n-form-item>
          <n-form-item label="总计发放" path="actual">
            <n-input v-model:value="model.actual" placeholder="请输入总计发放" type="number" />
          </n-form-item>
          <n-form-item label="总计扣除" path="debit">
            <n-input v-model:value="model.debit" placeholder="请输入总计扣除" type="number" />
          </n-form-item>
          <n-form-item label="发放时间">
            <n-date-picker v-model:value="model.real" type="daterange" clearable />
          </n-form-item>

          <n-form-item>
            <n-button
              attr-type="button"
              @click="handleValidateClick"
              type="info"
              style="position: absolute; right: 3%"
            >
              保存
            </n-button>
          </n-form-item>
        </n-form>
      </n-modal>

      <!-- 编辑弹窗 -->
      <!-- <n-modal
        v-model:show="data.add1"
        :mask-closable="false"
        preset="dialog"
        title="编辑"
        style="position: relative"
      >
        <n-form
          label-placement="left"
          label-width="auto"
          :rules="addrules"
          ref="formRef"
          :model="model1"
        >
          <n-form-item label="姓名" path="name">
            <n-input v-model:value="model1.name" placeholder="请输入姓名" type="text" />
          </n-form-item>
          <n-form-item label="电话号码" path="tel">
            <n-input v-model:value="model1.tel" placeholder="请输入电话号码" type="number" />
          </n-form-item>
          <n-form-item label="基本工资" path="wage">
            <n-input v-model:value="model1.wage" placeholder="请输入基本工资" type="number" />
          </n-form-item>
          <n-form-item label="出勤天数" path="days">
            <n-input v-model:value="model1.days" placeholder="请输入出勤天数" type="number" />
          </n-form-item>
          <n-form-item label="加班时长" path="hours">
            <n-input v-model:value="model1.hours" placeholder="请输入加班时长" type="number" />
          </n-form-item>
          <n-form-item label="加班工资" path="overtime">
            <n-input v-model:value="model1.overtime" placeholder="请输入加班工资" type="number" />
          </n-form-item>
          <n-form-item label="岗位津贴" path="jobs">
            <n-input v-model:value="model1.jobs" placeholder="请输入岗位津贴" type="number" />
          </n-form-item>
          <n-form-item label="奖金" path="prize">
            <n-input v-model:value="model1.prize" placeholder="请输入奖金" type="number" />
          </n-form-item>
          <n-form-item label="交通补贴" path="traffic">
            <n-input v-model:value="model1.traffic" placeholder="请输入交通补贴" type="number" />
          </n-form-item>
          <n-form-item label="总计工资" path="collect">
            <n-input v-model:value="model1.collect" placeholder="请输入总计工资" type="number" />
          </n-form-item>
          <n-form-item label="五险一金扣除" path="insurances">
            <n-input
              v-model:value="model1.insurances"
              placeholder="请输入五险一金扣除"
              type="number"
            />
          </n-form-item>
          <n-form-item label="个体税扣除" path="unit">
            <n-input v-model:value="model1.unit" placeholder="请输入个体税扣除" type="number" />
          </n-form-item>
          <n-form-item label="考勤扣除" path="clocking">
            <n-input v-model:value="model1.clocking" placeholder="请输入考勤扣除" type="number" />
          </n-form-item>
          <n-form-item label="其他扣款" path="else">
            <n-input v-model:value="model1.else" placeholder="请输入其他扣款" type="number" />
          </n-form-item>
          <n-form-item label="总计发放" path="actual">
            <n-input v-model:value="model1.actual" placeholder="请输入总计发放" type="number" />
          </n-form-item>
          <n-form-item label="总计扣除" path="debit">
            <n-input v-model:value="model1.debit" placeholder="请输入总计扣除" type="number" />
          </n-form-item>
          <n-form-item label="发放时间">
            <n-date-picker v-model:value="model1.real" type="daterange" clearable />
          </n-form-item>
          <n-form-item>
            <n-button
              attr-type="button"
              @click="handleValidateClick1"
              type="info"
              style="position: absolute; right: 3%"
            >
              保存
            </n-button>
          </n-form-item>
        </n-form>
      </n-modal> -->
    </n-card>
  </div>
</template>

<script>
  import { h, reactive, ref, defineComponent, getCurrentInstance } from 'vue';
  import { NButton, useMessage, NAvatar, NImage, useDialog } from 'naive-ui';
  import { PlusOutlined } from '@vicons/antd';
  import { useRouter } from 'vue-router';
  import FileSaver from 'file-saver';
  import * as XLSX from 'xlsx';
  import table2excel from 'js-table2excel';
  const createColumns = ({ edite, dele }) => {
    return [
      {
        type: 'selection',
        disabled(row) {
          return row.id === 'Edward King 3';
        },
      },
      {
        title: 'id',
        key: 'id',
      },
      {
        title: '姓名',
        key: 'name',
      },
      {
        title: '电话',
        key: 'tel',
      },
      {
        title: '基本工资',
        key: 'wage',
      },
      {
        title: '出勤天数',
        key: 'days',
      },
      {
        title: '加班时长',
        key: 'hours',
      },
      {
        title: '加班工资',
        key: 'overtime',
      },
      {
        title: '岗位津贴',
        key: 'jobs',
      },
      {
        title: '奖金',
        key: 'prize',
      },
      {
        title: '交通补贴',
        key: 'traffic',
      },
      {
        title: '总计工资',
        key: 'collect',
      },
      {
        title: '五险一金扣除',
        key: 'insurances',
      },
      {
        title: '个税扣除',
        key: 'unit',
      },
      {
        title: '考勤扣除',
        key: 'clocking',
      },
      {
        title: '其他扣款',
        key: 'else',
      },
      {
        title: '合计扣款',
        key: 'debit',
      },
      {
        title: '实际发放',
        key: 'actual',
      },
      {
        title: '工资发放时间',
        key: 'real',
      },
      {
        title: '工资发放状态',
        key: 'status',
      },
      // {
      //   title: '操作',
      //   key: 'actions',
      //   fixed: 'right',
      //   width: 60,
      //   // titleRowSpan:1,
      //   render(row) {
      //     return h(
      //       NButton,
      //       {
      //         size: 'small',
      //         type: 'info',
      //         onClick: () => edite(row),
      //       },
      //       { default: () => '编辑' }
      //     );
      //   },
      // },
      {
        title: '操作',
        width: 60,
        fixed: 'right',
        key: 'dele',
        render(row) {
          return h(
            NButton,
            {
              size: 'small',
              type: 'error',
              onClick: () => dele(row),
            },
            { default: () => '删除' }
          );
        },
      },
    ];
  };
  export default defineComponent({
    setup() {
      let { proxy } = getCurrentInstance();
      const checkedRowKeysRef = ref([]);
      const message = useMessage();
      const dialog = useDialog();
      const paginationReactive = reactive({
        page: 1,
        pageSize: 5,
        showSizePicker: true,
        pageSizes: [3, 5, 7],
        onChange: (page) => {
          paginationReactive.page = page;
        },
        onUpdatePageSize: (pageSize) => {
          paginationReactive.pageSize = pageSize;
          paginationReactive.page = 1;
        },
      });
      function load() {
        proxy
          .$axios({
            url: '/api/wage/index/lists',
            method: 'post',
            data: {
              project_id: 1,
              admin_id: 111,
              admin_name: '张',
            },
          })
          .then((res) => {
            console.log(res);
            data.data = res.data.data.list;
            
            for (let i = 0; i < data.data.length; i++) {
              if (data.data[i].status == 1) {
                data.data[i].status = '已发放';
              } else if (data.data[i].status == 2) {
                data.data[i].status = '未发放';
              }
            }
            data.alldata=data.data;
            console.log(data.data);
          });
      }
      load();
      const data = reactive({
        data: [],
        add: false,
        add1: false,
        edite: {},
        deleall: [],
        tabledata: [],
        search: '',
        arr: [],
        arr1: [],
        alldata:[],
      });
      function add() {
        data.add = true;
      }
      const formRef = ref(null);
      const model = reactive({
        name: '',
        tel: '',
        wage: '',
        days: '',
        hours: '',
        overtime: '',
        jobs: '',
        prize: '',
        traffic: '',
        collect: '',
        insurances: '',
        unit: '',
        clocking: '',
        else: '',
        actual: '',
        debit: '',
        real: [1654531200000, 1660924800000],
      });
      const model1 = reactive({
        name: '',
        tel: null,
        wage: null,
        days: null,
        hours: null,
        overtime: null,
        jobs: null,
        prize: null,
        traffic: null,
        collect: null,
        insurances: null,
        unit: null,
        clocking: null,
        else: null,
        actual: null,
        debit: null,
        real: null,
      });

      const changeExcel = (e) => {
        console.log(e);
        let file = e.target.files[0];
        let param = new FormData(); //创建form对象
        param.append('excel', file);
        param.append('admin_id', 111);
        param.append('admin_name', '张');
        proxy
          .$axios({
            url: '/api/wage/index/save_Import',
            method: 'post',
            data: param,
          })
          .then((res) => {
            console.log(res);
            if (res.data.code == 1) {
              message.success('导入成功');
            } else {
              message.success('导入失败');
            }
          });
      };
      const portexcel = () => {
        const excelName = '工资表';
        const column = [
          {
            title: 'id',
            key: 'id',
          },
          {
            title: '姓名',
            key: 'name',
          },
          {
            title: '电话',
            key: 'tel',
          },
          {
            title: '基本工资',
            key: 'wage',
          },
          {
            title: '出勤天数',
            key: 'days',
          },
          {
            title: '加班时长',
            key: 'hours',
          },
          {
            title: '加班工资',
            key: 'overtime',
          },
          {
            title: '岗位津贴',
            key: 'jobs',
          },
          {
            title: '奖金',
            key: 'prize',
          },
          {
            title: '交通补贴',
            key: 'traffic',
          },
          {
            title: '总计工资',
            key: 'collect',
          },
          {
            title: '五险一金扣除',
            key: 'insurances',
          },
          {
            title: '个税扣除',
            key: 'unit',
          },
          {
            title: '考勤扣除',
            key: 'clocking',
          },
          {
            title: '其他扣款',
            key: 'else',
          },
          {
            title: '合计扣款',
            key: 'debit',
          },
          {
            title: '实际发放',
            key: 'actual',
          },
          {
            title: '工资发放时间',
            key: 'real',
          },
          {
            title: '工资发放状态',
            key: 'status',
          },
        ];
        if (data.tabledata.length == 0) {
          message.error('您未选中导出项');
        } else {
          table2excel(column, data.tabledata, excelName);
          message.success('导出成功');
          data.tabledata = [];
        }
      };
      const timestampToTime = (timestamp) => {
        let datesd = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        let Y = datesd.getFullYear() + '-';
        let M =
          (datesd.getMonth() + 1 < 10 ? '0' + (datesd.getMonth() + 1) : datesd.getMonth() + 1) +
          '-';
        let D = datesd.getDate() < 10 ? '0' + datesd.getDate() : datesd.getDate();
        return Y + M + D;
      };
      function deleall() {
        if (data.tabledata.length == 0) {
          message.error('您未选中删除项');
        } else {
          dialog.warning({
            title: '提示',
            content: '确定要删除这些工资信息吗？',
            positiveText: '确定',
            negativeText: '不确定',
            onPositiveClick: () => {
              for (let i = 0; i < data.tabledata.length; i++) {
                data.deleall.push(data.tabledata[i].id);
              }
              console.log(data.deleall);
              proxy
                .$axios({
                  url: '/api/wage/index/del',
                  method: 'post',
                  data: {
                    ids: data.deleall,
                    admin_id: 111,
                    admin_name: '张',
                  },
                })
                .then((res) => {
                  console.log(res);
                  if (res.data.code == 1) {
                    message.success('删除成功');
                    data.deleall = [];
                    load();
                  } else {
                    message.error('删除失败');
                    data.deleall = [];
                  }
                });
            },
            onNegativeClick: () => {},
          });
        }
      }
      function editeall() {
        if (data.tabledata.length == 0) {
          message.error('您未选中修改项');
        } else {
          dialog.warning({
            title: '提示',
            content: '确定要修改这些工资状态吗？',
            positiveText: '确定',
            negativeText: '不确定',
            onPositiveClick: () => {
              for (let i = 0; i < data.tabledata.length; i++) {
                data.deleall.push(data.tabledata[i].id);
              }
              proxy
                .$axios({
                  url: '/api/wage/index/edit',
                  method: 'post',
                  data: {
                    ids: data.deleall,
                    status: 1,
                    admin_id: 111,
                    admin_name: '张',
                  },
                })
                .then((res) => {
                  console.log(res);
                  if (res.data.code == 1) {
                    message.success('修改成功');
                    data.deleall = [];
                    load();
                  } else {
                    message.error('修改失败');
                    data.deleall = [];
                  }
                });
            },
            onNegativeClick: () => {},
          });
        }
      }
      // 单条添加
      function handleValidateClick() {
        console.log(model);
        proxy
          .$axios({
            url: '/api/wage/index/add',
            method: 'post',
            data: {
              name: model.name,
              tel: model.tel,
              wage: model.wage,
              days: model.days,
              hours: model.hours,
              overtime: model.overtime,
              jobs: model.jobs,
              prize: model.prize,
              traffic: model.traffic,
              collect: model.collect,
              insurances: model.insurances,
              unit: model.unit,
              clocking: model.clocking,
              else: model.else,
              actual: model.actual,
              debit: model.debit,
              real: model.real,
              admin_id: 111,
              admin_name: '张',
            },
          })
          .then((res) => {
            console.log(res);
            if (res.data.code == 1) {
              message.success('添加成功');
              data.add = false;
              load();
            } else {
              message.error('添加失败');
            }
          });
      }
      function download() {
        window.location.href(
          'https://view.officeapps.live.com/op/view.aspx?src=http%3A%2F%2Frlzy.zxz.red%2Fuploads%2Fdemo.xlsx&wdOrigin=BROWSELINK'
        );
      }
      function search() {
        data.arr=[];
        for (let i = 0; i < data.alldata.length; i++) {
          if (data.alldata[i].name.indexOf(data.search) != -1) {
            data.arr.push(data.alldata[i]);
          }
        }
        console.log(data.arr);
        data.data = data.arr;
      }
      function reset() {
        load();
        data.search='';
      }
      return {
        reset,
        search,
        download,
        editeall,
        handleValidateClick,
        deleall,
        timestampToTime,
        load,
        add,
        model,
        model1,
        data,
        changeExcel,
        portexcel,
        addrules: {
          name: {
            required: true,
            message: '请输入姓名',
            trigger: ['blur', 'input'],
          },
          tel: {
            required: true,
            message: '请输入电话号码',
            trigger: ['blur', 'input'],
          },
          wage: {
            required: true,
            trigger: ['blur', 'change'],
            message: '请输入数量',
          },
          days: {
            required: true,
            trigger: ['blur', 'change'],
            message: '请输入数量',
          },
          hours: {
            required: true,
            trigger: ['blur', 'change'],
            message: '请输入数量',
          },
          overtime: {
            required: true,
            trigger: ['blur', 'change'],
            message: '请输入数量',
          },
          jobs: {
            required: true,
            trigger: ['blur', 'change'],
            message: '请输入数量',
          },
          prize: {
            required: true,
            trigger: ['blur', 'change'],
            message: '请输入数量',
          },
          traffic: {
            required: true,
            trigger: ['blur', 'change'],
            message: '请输入数量',
          },
          collect: {
            required: true,
            trigger: ['blur', 'change'],
            message: '请输入数量',
          },
          insurances: {
            required: true,
            trigger: ['blur', 'change'],
            message: '请输入数量',
          },
          unit: {
            required: true,
            trigger: ['blur', 'change'],
            message: '请输入数量',
          },
          clocking: {
            required: true,
            trigger: ['blur', 'change'],
            message: '请输入数量',
          },
          else: {
            required: true,
            trigger: ['blur', 'change'],
            message: '请输入数量',
          },
          actual: {
            required: true,
            trigger: ['blur', 'change'],
            message: '请输入数量',
          },
          debit: {
            required: true,
            trigger: ['blur', 'change'],
            message: '请输入数量',
          },
        },
        formRef,

        columns: createColumns({
          edite(rowData) {
            model1.name = rowData.name;
            model1.tel = rowData.tel;
            model1.wage = rowData.wage;
            model1.days = rowData.days;
            model1.hours = rowData.hours;
            model1.overtime = rowData.overtime;
            model1.jobs = rowData.jobs;
            model1.prize = rowData.prize;
            model1.traffic = rowData.traffic;
            model1.collect = rowData.collect;
            model1.insurances = rowData.insurances;
            model1.unit = rowData.unit;
            model1.clocking = rowData.clocking;
            model1.else = rowData.else;
            model1.actual = rowData.actual;
            model1.debit = rowData.debit;
            model1.real = [
              Date.parse(rowData.real.slice(0, 10)),
              Date.parse(rowData.real.slice(11, 21)),
            ];
            data.add1 = true;
          },
          dele(rowData) {
            dialog.warning({
              title: '提示',
              content: '确定要删除这条招聘信息吗？',
              positiveText: '确定',
              negativeText: '不确定',
              onPositiveClick: () => {
                proxy
                  .$axios({
                    url: '/api/wage/index/del',
                    method: 'post',
                    data: {
                      ids: rowData.id,
                      admin_id: 111,
                      admin_name: '张',
                    },
                  })
                  .then((res) => {
                    console.log(res);
                    if (res.data.code == 1) {
                      message.success('删除成功');
                      load();
                    } else {
                      message.error('删除失败');
                    }
                  });
              },
              onNegativeClick: () => {},
            });
          },
        }),
        pagination: paginationReactive,
        checkedRowKeys: checkedRowKeysRef,
        rowKey: (row) => row,
        handleCheck(rowKeys) {
          console.log(rowKeys);
          data.tabledata = rowKeys;
        },
      };
    },
  });
</script>

<style scoped lang="less">
  .top {
    height: 34px;
    width: 9vw;
    background-color: rgb(24, 160, 88);
    font-size: 14px;
    line-height: 34px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    position: absolute;
    right: 110px;
  }
  .top:hover {
    background-color: #36ad6a;
  }
</style>
